<template>
  <div class="container">
    <div style="padding-left: 10px">
      <el-row class="Jcommon-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="9">
            <el-form-item label="收费时间">
              <el-date-picker
                v-model="pickerVal"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="timestamp"
                clearable
                :editable="false"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-top: 10px">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div>

        <div>
          <el-form>
            <el-row>
              <el-col :span="4">
                <el-form-item label="总计收费" style="margin-bottom: 0px">
                  <label style="color: #1890ff">
<!--                    {{ data.paySum.receivable }}-->
                    112
                  </label>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="滞纳金" style="margin-bottom: 0px">
                  <label style="color: #1890ff">
<!--                    {{ data.paySum.lateFeeMoney }}-->
                    112
                  </label>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="优惠金额" style="margin-bottom: 0px">
                  <label style="color: #1890ff">
<!--                    {{ data.paySum.discount }}-->
                    11
                  </label>
                </el-form-item>
              </el-col>
            </el-row>

<!--            2-->
            <el-row :gutter="16" :style="'width:100%'">
              <el-col :span="4">
                <el-form-item label="收款金额" style="margin-bottom: 0px">
                  <label style="color: #1890ff">
<!--                    {{ data.paySum.payMoney }}-->
                    22
                  </label>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="预存款支付" style="margin-bottom: 0px">
                  <label style="color: #1890ff">
<!--                    {{ data.paySum.prePayMoney }}-->
                    22
                  </label>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="找零结存" style="margin-bottom: 0px">
                  <label style="color: #1890ff">23
<!--                    {{ data.paySum.preSaveMoney }}-->

                  </label>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
<!-- -->
<!--表格1-->
        <div>
          <div style="padding-left: 10px">
<!--           v-model="activeName" @tab-click="handleClick" -->
            <el-tabs  style="height: 100%">
              <el-tab-pane label="常规收费合计" name="first"></el-tab-pane>
            </el-tabs>
          </div>

          <div>
<!--            :data="data.billSum"-->
            <el-table>
              <el-table-column prop="feeItemName" label="收费项名" align="left" width="150px" />
              <el-table-column prop="lateFee" label="滞纳金" align="left" width="150px" />
              <el-table-column prop="discount" label="优惠金额" align="left" width="150px" />
              <el-table-column prop="total" label="总计收费" align="left" width="150px" />
            </el-table>
          </div>
        </div>
<!--表格2-->
        <div>
          <div style="padding-left: 10px">
<!--             -->
            <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
              <el-tab-pane label="押金收费合计" name="first"></el-tab-pane>
            </el-tabs>
          </div>
          <div>
<!--           :data="data.depositSum" -->
            <el-table >
              <el-table-column prop="feeItemName" label="收费项名" align="left" width="150px" />
              <el-table-column prop="total" label="总计收费" align="left" width="150px" />
            </el-table>
          </div>
        </div>
<!--        表格3-->
        <div>
          <div style="padding-left: 10px">
<!--           v-model="activeName" @tab-click="handleClick" -->
            <el-tabs  style="height: 100%">
              <el-tab-pane label="临时收费合计" name="first"></el-tab-pane>
            </el-tabs>
          </div>
          <div>
<!--            :data="data.tempSum"-->
            <el-table >
              <el-table-column prop="feeItemName" label="收费项名" align="left" width="150px" />
              <el-table-column prop="total" label="总计收费" align="left" width="150px" />
            </el-table>
          </div>
        </div>

<!--        退费表-->
        <h1 style="margin-top: 50px; padding-left: 10px">退费合计</h1>
        <div class="Jcommon-head">
          <el-form @submit.native.prevent size="mini" :style="'width:100%'">
            <el-row :gutter="16" :style="'width:100%'">
              <el-col :span="4">
                <el-form-item label="退还金额" style="margin-bottom: 0px">
                  <label style="color: #1890ff">
<!--                    {{ data.refundSum.receivable }}-->
                    11000000000
                  </label>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
<!--        表4-->
        <div>
          <div style="padding-left: 10px">
<!--            v-model="activeName" @tab-click="handleClick"-->
            <el-tabs  style="height: 100%">
              <el-tab-pane label="押金退还合计" name="first"></el-tab-pane>
            </el-tabs>
          </div>
          <div>
<!--           :data="data.depositRefundSum" -->
            <el-table >
              <el-table-column prop="feeItemName" label="收费项名" align="left" width="150px" />
              <el-table-column prop="total" label="退还金额" align="left" width="150px" />
            </el-table>
          </div>
        </div>

<!--        表5-->
        <div>
          <div style="padding-left: 10px">
<!--            v-model="activeName" @tab-click="handleClick"-->
            <el-tabs  style="height: 100%">
              <el-tab-pane label="临时收费退还合计" name="first"></el-tab-pane>
            </el-tabs>
          </div>
          <div>
<!--            :data="data.tempRefundSum"-->
            <el-table >
              <el-table-column prop="feeItemName" label="收费项名" align="left" width="150px" />
              <el-table-column prop="total" label="退还金额" align="left" width="150px" />
            </el-table>
          </div>
        </div>

      </div>
    </div>
  </div>



</template>

<script>
import { listChargeitem, getChargeitem, delChargeitem, addChargeitem, updateChargeitem } from "@/api/charge/chargeitem";

export default {
  name: "PaymentStatistics",
  data() {
    return {
      total:0,
      chargeList:[],
      loading:true,

    };
  },
  created() {
    this.getChargeList();
  },
  methods: {
    getChargeList(){
      listChargeitem().then(resp =>{
        this.chargeList = resp.rows;
        this.total = resp.total;
        this.loading = false;
      })
    }
  },
  handleClick(tab, event) {},
};
</script>

<style scoped lang="scss">


</style>

